<template>
  <el-form
    ref="firstForm"
    :model="formData"
    :label-width="type !== 'add' ? '100' : '100px'"
    :rules="rules"
    class="flex flex-wrap pr-20"
  >
    <el-form-item :label="$t('SEGMENT_NAME')" prop="segmentName" class="w-100">
      <el-input v-model.trim="formData.segmentName" maxlength="100" />
    </el-form-item>
    <el-form-item :label="$t('A_END_STATION_NAME')" prop="startStationId" class="w-50">
      <el-input v-model="formData.startStationId" class="hide" />
      <region-cascader
        class="block"
        :selected-ids="[formData.startStationId]"
        :clearable="false"
        data-name="stationTree"
        :placeholder="'A_END_STATION_NAME'"
        @change="aStationChange"
      />
    </el-form-item>
    <el-form-item :label="$t('Z_END_STATION_NAME')" prop="endStationId" class="w-50">
      <el-input v-model="formData.endStationId" class="hide" />
      <region-cascader
        class="block"
        :selected-ids="[formData.endStationId]"
        :clearable="false"
        data-name="stationTree"
        :placeholder="'Z_END_STATION_NAME'"
        @change="zStationChange"
      />
    </el-form-item>
    <el-form-item :label="$t('ANODE')" class="w-50" prop="startNodeId">
      <el-select
        v-model="formData.startNodeId"
        :placeholder="$t('SELECT_ANODE')"
        @change="aNodeChange"
      >
        <el-option
          v-for="item in aNodeList"
          :key="item.nodeId"
          :value="item.nodeId"
          :label="item.nodeName"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('ZNODE')" class="w-50" prop="endNodeId">
      <el-select
        v-model="formData.endNodeId"
        :placeholder="$t('SELECT_ZNODE')"
        @change="zNodeChange"
      >
        <el-option
          v-for="item in zNodeList"
          :key="item.nodeId"
          :value="item.nodeId"
          :label="item.nodeName"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('SELECT_CABLE')" class="w-100">
      <el-table
        v-if="step === 1"
        class="w-100"
        :data="cableList"
        size="mini"
        height="300"
        :max-height="resetSize(400)"
        border
        @row-click="changeSelected"
      >
        <template slot="empty">
          <NullData />
        </template>
        <el-table-column width="50" align="center">
          <template v-slot="scope">
            <el-checkbox v-model="scope.row.checked" @change="changeSelected(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('CABLE_NAME')" width="150" prop="cableName" show-overflow-tooltip />
        <el-table-column :label="$t('RESOURCECODE')" width="150" prop="resourceCode" show-overflow-tooltip />
        <el-table-column
          :label="$t('CABLE_LEVEL')"
          prop="cableLevelText"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('CABLE_TYPE')"
          prop="cableTypeText"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('NOMINAL_CAPACITY')"
          prop="capacity"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('NUMBER_CONNECTED')"
          prop="connNum"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('NUMBER_TAKEUP')"
          prop="occupyNum"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('NUMBER_IDLE')"
          prop="idleNum"
          min-width="100"
          show-overflow-tooltip
        />
      </el-table>
    </el-form-item>
  </el-form>
</template>

<script>
  import { get } from 'lodash'
  import { mapGetters } from 'vuex'
  import nodeApi from '@/api/oen/NodeApi'
  import cableApi from '@/api/oen/CableApi'
  import RegionCascader from '@/components/RegionCascader'

  export default {
    components: { RegionCascader },
    props: {
      type: {
        type: String,
        default: ''
      },
      formData: {
        type: Object,
        default: () => {}
      },
      step: {
        type: Number,
        default: 2
      }
    },
    data() {
      return {
        cableList: [],
        aNodeList: [],
        zNodeList: []
      }
    },
    computed: {
      ...mapGetters(['dictMap', 'baseRegionList', 'customDictMap']),
      rules() {
        return {
          segmentName: [
            {
              required: true,
              message: this.$t('PLEASE_INPUT') + this.$t('SEGMENT_NAME'),
              trigger: 'blur'
            }
          ],
          startStationId: [
            {
              required: true,
              message: this.$t('PLEASE_SELECT') + this.$t('A_END_STATION_NAME'),
              trigger: 'change'
            }
          ],
          endStationId: [
            {
              required: true,
              message: this.$t('PLEASE_SELECT') + this.$t('Z_END_STATION_NAME'),
              trigger: 'change'
            }
          ],
          startNodeId: [
            {
              required: true,
              message: this.$t('SELECT_ANODE'),
              trigger: 'change'
            }
          ],
          endNodeId: [
            {
              required: true,
              message: this.$t('SELECT_ZNODE'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    methods: {
      // 区域搜索条件改变
      aStationChange(data) {
        if (this.formData.startStationId !== data) {
          this.formData.startStationId = data
          this.formData.startStationName = this.getRegionName(data)
          this.formData.startNodeId = ''
          data && this.getNodeList(data, 'a')
          this.getCableList()
        }
      },
      // 区域搜索条件改变
      zStationChange(data) {
        if (this.formData.endStationId !== data) {
          this.formData.endNodeId = ''
          this.formData.endStationId = data
          this.formData.endStationName = this.getRegionName(data)
          data && this.getNodeList(data, 'z')
          this.getCableList()
        }
      },
      // 获取站点下节点
      getNodeList(stationId, side) {
        nodeApi.queryList({ stationIdList: [stationId] }).then(res => {
          const nodeList = res || []
          this[side + 'NodeList'] = nodeList.filter(
            i =>
              i.nodeCategory !== 'SPLICE_CLOSURE' ||
              (i.nodeCategory === 'SPLICE_CLOSURE' &&
                get(i, 'properties.spliceClosure.connectionModeType', '') === 'DIVERGENCE')
          )
        })
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(i => i.regionId === stationId)
        return stationData ? stationData.regionName : ''
      },
      // 获取光缆列表
      getCableList() {
        this.cableList = []
        this.formData.cableId = ''
        this.formData.cableLength = ''
        if (this.formData.startStationId && this.formData.endStationId) {
          const querData =
            this.formData.startStationId === this.formData.endStationId
              ? {
                startStationIdList: [this.formData.startStationId],
                endStationIdList: [this.formData.startStationId]
              }
              : {
                mustStationIdList: [this.formData.startStationId, this.formData.endStationId]
              }
          cableApi.getByStationList(querData).then(res => {
            this.cableList = res.map(item => {
              item.checked = false
              item.cableLevelText = this.customDictMap[item.cableLevel] || '--'
              item.cableTypeText = this.dictMap.CABLE_TYPE[item.cableType] || '--'
              return item
            })
          })
        }
      },
      // A节点选择改变
      aNodeChange() {
        this.formData.startNode = this.aNodeList.find(i => i.nodeId === this.formData.startNodeId)
        this.formData.startNodeCategory = this.formData.startNode.nodeCategory
      },
      // Z节点选择改变
      zNodeChange() {
        this.formData.endNode = this.zNodeList.find(i => i.nodeId === this.formData.endNodeId)
        this.formData.endNodeCategory = this.formData.endNode.nodeCategory
      },
      rowClicked(row) {
        row.checked = !row.checked
      },
      // 光缆选中状态
      changeSelected(row) {
        const checked = row.checked
        this.formData.cable.checked = false
        row.checked = checked
        if (checked) {
          this.formData.cable = row
          this.formData.cableId = row.cableId
          this.formData.cableLength = row.cableLength
        } else {
          this.formData.cable = {}
          this.formData.cableId = ''
          this.formData.cableLength = ''
        }
      }
    }
  }
</script>

<style></style>
